<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>xxwy-ddu</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        /**右键菜单*/
        .rightmenu {
            position: absolute;
            width: 110px;
            z-index: 9999;
            display: none;
            background-color: #fff;
            padding: 2px;
            color: #333;
            border: 1px solid #eee;
            border-radius: 2px;
            cursor: pointer;
        }

        .rightmenu li {
            text-align: center;
            display: block;
            height: 30px;
            line-height: 32px;
        }

        .rightmenu li:hover {
            background-color: #666;
            color: #fff;
        }
    </style>
</head>
<body class="layui-layout-body">
<script src="/webjars/jquery/jquery.js"></script>
<script src="/layui/layui.js"></script>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">ddu-后台</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item" lay-unselect="">
                <a class="hideMenu" title="侧边伸缩"><i id="hideMenuIcon"class="layui-icon layui-icon-shrink-right"></i></a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a class="refresh refreshThis" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;"></a></dd>
                    <dd><a href="javascript:;">消息管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a sec:authorize="!isAuthenticated()">
                    <img src="image/head.jpg" class="layui-nav-img">
                    游客
                </a>
                <a sec:authorize="isAuthenticated()" href="javascript:;">
                    <img src="image/head.jpg" class="layui-nav-img">
                    <span sec:authentication="name"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">基本资料</a></dd>
                    <dd><a href="javascript:;">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a th:href="@{quit}">退了</a></li>
        </ul>
    </div>

    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="hbkNavbar">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-home"></i>
                        <cite>主页</cite>
                        <span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">
                        <dd data-name="console">
                            <a href="javascript:;" uri="main">主页一</a>
                        </dd>

                    </dl>
                </li>
                <!--一级菜单-->
                <!--从数据库中读取出来的-->
                <li class="layui-nav-item" th:each="m:${menu}">
                    <a href="javascript:;">
                        <i class="layui-icon" th:classappend="${m.mIcon}"></i>
                        <cite th:text="${m.mTitle}">标题</cite>
                        <span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">
                        <dd data-name="console" th:each="md:${m.menuDetails}">
                            <a href="javascript:;" class="bt" th:uri="${md.mUrl}" th:text="${md.mdTitle}">副标题</a>
                        </dd>

                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主体 -->
    <div class="layui-body">
        <!-- 顶部切换卡 -->
        <div class="layui-tab" lay-filter="tabs" lay-allowClose="true" style="width: 100%;">
            <ul class="layui-tab-title"></ul>
            <div class="layui-tab-content"></div>
        </div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © xxwy.com - ddu
    </div>
</div>
<ul class="rightmenu">
    <li data-type="closethis">关闭当前</li>
    <li data-type="closeall">关闭所有</li>
    <li data-type="closeothers">关闭非当前</li>
    <li data-type="closeleft">关闭左侧所有</li>
    <li data-type="closeright">关闭右侧所有</li>
    <li data-type="cancel"><i class="layui-icon layui-icon-yinshenim"></i>取消</li>
</ul>
<script>
    //初始化
    var tabId ='index-main',tabIndex = 0;
    var tabIds = new Array();

    function bind(height,tabcontent) {
       var height = height || 60 + 41 + 44; //头部高度 顶部切换卡标题高度 底部高度
       /**
        * iframe自适应
        */
       $(window).resize(function() {
           //设置顶部切换卡容器度
           tabcontent.height($(this).height() - height);
           //设置顶部切换卡容器内每个iframe高度
           tabcontent.find('iframe').each(function () {
               $(this).height(tabcontent.height());
           });
       }).resize();
   }

    function tabadd(element,layer, tabfilter, url, title) {
        var tab = $('.layui-tab[lay-filter=' + tabfilter + ']').eq(0);
        var tabTitle = tab.children('.layui-tab-title').eq(0);
        var tabIframe = tab.children('.layui-tab-content').eq(0);
        var id = "index-" + url;
        var lay_id = tabTitle.find('li[lay-id=' + id + ']').eq(0);
        var tabindex = (new Date()).getTime();
        if (lay_id.length) {
            //获取iframe身上的tab index
            tabindex = tabIframe.attr('data-tabindex');
        }else {
            //添加tabs
            //显示加载
            var tmpIndex = layer.load();
            //设置1秒后再次关闭loading
            setTimeout(function() {
                layer.close(tmpIndex);
            }, 1000);
            var iframe = '<iframe scrolling="yes" onload="layui.layer.close(' + tmpIndex + ')"';
            iframe += ' src="' + url + '"  data-tabindex="' + tabindex + '"';
            iframe += ' style="width:100%;  border:0px; padding:0px;"';
            iframe += '></iframe>';
            element.tabAdd(tabfilter, {
                //我把 lay-id也设置成url
                id: id,
                title: title,
                content: iframe,
            });
            tabIds.push(id);
            CustomRightClick();
        };
        //隐藏第一个切换卡的删除按钮
        tabTitle.find('li').eq(0).find('i').hide();
        //跳转
        element.tabChange(tabfilter, id);
        bind(60 + 41 + 40 + 44, tabIframe); //头部高度 + 顶部切换卡标题高度 + 顶部切换卡内容padding + 底部高度
        parent.layer.iframeAuto(id);
    }

    function CustomRightClick () {
        //屏蔽Tab右键菜单
        $('.layui-tab-title li').on('contextmenu', function () {
            return false;
        })
        $('.layui-tab-title,.layui-tab-title li').click(function () {
            $('.rightmenu').hide();
        });
        $('.layui-tab-title li').on('contextmenu', function (e) {
            var popupmenu = $(".rightmenu");
            l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
            t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
            popupmenu.css({left: l, top: t}).show();
            return false;
        });
    }
    layui.use( ['layer','element'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var i = 0;
        //tab当前的id
        //添加主页：
        tabadd(element,layer,"tabs","main","主页一");
        //添加列表
        element.on('nav(hbkNavbar)', function (elem) {
            var url = elem.attr("uri");
            var title = elem.text();
            if (url) {
                tabadd(element,layer,"tabs",url,title)
            }
        });
        element.on('tab(tabs)', function(data){
            tabIndex = data.index;
            tabId = $(this).attr('lay-id');
            console.log(tabIds)
        });

        //头部区域点击事件
        $(".hideMenu").click(function(){
            if(i==0){
                $(".layui-side").animate({width:'toggle'});
                $(".layui-body").animate({left:'0px'});
                $(".layui-footer").animate({left:'0px'});
                i++;
                $("#hideMenuIcon").attr("class","layui-icon layui-icon-spread-left");
            }else{
                $(".layui-side").animate({width:'toggle'});
                $(".layui-body").animate({left:'200px'});
                $(".layui-footer").animate({left:'200px'});
                $("#hideMenuIcon").attr("class","layui-icon layui-icon-shrink-right");
                i--;
            }
        });
        $(".refresh").on("click",function(){  //禁止连续点击
            console.log("刷新的页面："+tabIndex);
            //判断当前tabIndex:
            if($(this).hasClass("refreshThis")){
                $(this).removeClass("refreshThis");
                $(".layui-body").find("iframe")[tabIndex].contentWindow.location.reload(true);
                setTimeout(function(){
                    $(".refresh").addClass("refreshThis");
                },3000)
            }else{
                layer.msg("干嘛一直点我！");
            }
        });
        $(".rightmenu li").click(function () {
            switch ($(this).attr("data-type")) {
                case "closethis"://关闭当前，如果开始了tab可关闭，实际意义不大
                    tabDelete(tabId);
                    break;
                case "closeall"://关闭所有
                    tabDeleteAll(tabIds);
                    break;
                case "closeothers"://关闭非当前
                    $.each(tabIds, function (i) {
                        var tmpTabID = tabIds[i];
                        if (tabId != tmpTabID)
                            tabDelete(tmpTabID);
                    })
                    break;
                case "closeleft"://关闭左侧全部
                    var index = tabIds.indexOf(tabId);
                    tabDeleteAll(tabIds.slice(0, index));
                    break;
                case "closeright"://关闭右侧全部
                    var index = tabIds.indexOf(tabId);
                    tabDeleteAll(tabIds.slice(index + 1));
                    break;
                default:
                    $('.rightmenu').hide();

            }
            $('.rightmenu').hide();
        });

        tabDelete = function (id) {
            console.log("删除的TabID："+id)
            element.tabDelete("tabs", id);//删除
            tabIds.splice($.inArray(id,tabIds),1);
        };
        tabDeleteAll = function (ids) {
            $.each(ids, function (i, item) {
                element.tabDelete("tabs", item);
                tabIds.splice($.inArray(item,tabIds),1);
            })
        };
        $(document).click(function () {
            $('.rightmenu').hide();
        });
    });
</script>
</body>
</html>